<span class="pagination  pagination-sm inline">共{{total}}条，每页
  <span class="dropdown  pagination-sm inline">
    <button class="btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="true">
      {{pageSize}}
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li>
        <a href="javascript:void(0);" (click)="setPageSize(10)">10</a>
      </li>
      <li>
        <a href="javascript:void(0);" (click)="setPageSize(30)">30</a>
      </li>
      <li>
        <a href="javascript:void(0);" (click)="setPageSize(50)">50</a>
      </li>
      <li>
        <a href="javascript:void(0);" (click)="setPageSize(100)">100</a>
      </li>
      <li>
        <a href="javascript:void(0);" (click)="setPageSize(200)">200</a>
      </li>
    </ul>
  </span>条&nbsp;&nbsp;&nbsp;&nbsp;
</span>
  <ul class="pagination pagination-sm inline pull-right" *ngIf="totalPages<=7">
    <li [class.active]="pageNo==1">
      <a href="javascript:void(0);" (click)="goToPage(1)">1</a>
    </li>
    <li *ngIf="totalPages>=2" [class.active]="pageNo==2">
      <a href="javascript:void(0);" (click)="goToPage(2)">2</a>
    </li>
    <li *ngIf="totalPages>=3" [class.active]="pageNo==3">
      <a href="javascript:void(0);" (click)="goToPage(3)">3</a>
    </li>
    <li *ngIf="totalPages>=4" [class.active]="pageNo==4">
      <a href="javascript:void(0);" (click)="goToPage(4)">4</a>
    </li>
    <li *ngIf="totalPages>=5" [class.active]="pageNo==5">
      <a href="javascript:void(0);" (click)="goToPage(5)">5</a>
    </li>
    <li *ngIf="totalPages>=6" [class.active]="pageNo==6">
      <a href="javascript:void(0);" (click)="goToPage(6)">6</a>
    </li>
    <li *ngIf="totalPages>=7" [class.active]="pageNo==7">
      <a href="javascript:void(0);" (click)="goToPage(5)">7</a>
    </li>
  </ul>
  <ul class="pagination pagination-sm inline pull-right" *ngIf="totalPages>7&&pageNo<=4">
    <li [class.active]="pageNo==1">
      <a href="javascript:void(0);" (click)="goToPage(1)">1</a>
    </li>
    <li [class.active]="pageNo==2">
      <a href="javascript:void(0);" (click)="goToPage(2)">2</a>
    </li>
    <li [class.active]="pageNo==3">
      <a href="javascript:void(0);" (click)="goToPage(3)">3</a>
    </li>
    <li [class.active]="pageNo==4">
      <a href="javascript:void(0);" (click)="goToPage(4)">4</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(5)">5</a>
    </li>
    <li class="disabled">
      <a href="#">...</a>
    </li>
    <li [class.active]="pageNo==totalPages">
      <a href="javascript:void(0);" (click)="goToPage(totalPages)">{{totalPages}}</a>
    </li>
  </ul>
  <ul class="pagination pagination-sm inline pull-right" *ngIf="totalPages>7&&pageNo>4&&pageNo<totalPages-3">
    <li>
      <a href="javascript:void(0);" (click)="goToPage(1)">1</a>
    </li>
    <li class="disabled">
      <a href="#">...</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(pageNo-2)">{{pageNo-2}}</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(pageNo-1)">{{pageNo-1}}</a>
    </li>
    <li [class.active]="true">
      <a href="javascript:void(0);" (click)="goToPage(pageNo)">{{pageNo}}</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(pageNo+1)">{{pageNo+1}}</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(pageNo+2)">{{pageNo+2}}</a>
    </li>
    <li class="disabled">
      <a href="#">...</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(totalPages)">{{totalPages}}</a>
    </li>
  </ul>
  <ul class="pagination pagination-sm inline pull-right" *ngIf="totalPages>7&&pageNo>4&&pageNo>totalPages-4">
    <li>
      <a href="javascript:void(0);" (click)="goToPage(1)">1</a>
    </li>
    <li class="disabled">
      <a href="#">...</a>
    </li>
    <li>
      <a href="javascript:void(0);" (click)="goToPage(totalPages-4)">{{totalPages-4}}</a>
    </li>
    <li [class.active]="pageNo==totalPages-3">
      <a href="javascript:void(0);" (click)="goToPage(totalPages-3)">{{totalPages-3}}</a>
    </li>
    <li [class.active]="pageNo==totalPages-2">
      <a href="javascript:void(0);" (click)="goToPage(totalPages-2)">{{totalPages-2}}</a>
    </li>
    <li [class.active]="pageNo==totalPages-1">
      <a href="javascript:void(0);" (click)="goToPage(totalPages-1)">{{totalPages-1}}</a>
    </li>
    <li [class.active]="pageNo==totalPages">
      <a href="javascript:void(0);" (click)="goToPage(totalPages)">{{totalPages}}</a>
    </li>
  </ul>
